<template>
  <div class="select-wrapper">
    <div class="nav">
      <div class="left">
        <!-- <ul>
          <li>校区</li>
          <li>学生画像</li>
        </ul> -->
      </div>
      <div class="right"></div>
    </div>
    <div class="select-center">
      <div class="select">
        <div class="select-input">
          <label for="">姓名</label>
          <input type="text" v-model="stu_name" />
          <label for="">学号</label>
          <input type="text" v-model="stu_id" />
          <label for="">班级</label>
          <input type="text" v-model="class_num" />
          <label for="">专业</label>
          <input type="text" v-model="type" />
        </div>
        <div class="select-btn">
          <button @click="select">搜索</button>
          <button @click="TJ = true">新增</button>
        </div>
      </div>
      <div class="table" v-if="isShow">
        <table v-if="studentInfo?.length">
          <thead>
            <tr>
              <th>姓名</th>
              <th>学号</th>
              <th>班级</th>
              <th>专业</th>
              <th>类型</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- <el-tooltip content="点击跳转详情" placement="left" v-for="(student, index) in studentInfo" :key="index"> -->
            <tr class="student-list" v-for="(student, index) in studentInfo" :key="index">
              <td @click="toDetail(student.stuId)">{{ student.stuName }}</td>
              <td>{{ student.stuId }}</td>
              <td>{{ student.classNum }}</td>
              <td>{{ student.major }}</td>
              <td>{{ student.eduType }}</td>
              <td><el-button style="margin-right: 20px;" type="primary" plain
                  @click="dialogFormVisible = true, update(student)">更新</el-button>
                <el-button @click="deleteStu(student.stuId)" type="danger" plain>删除</el-button>
              </td>
            </tr>
            <!-- </el-tooltip> -->
          </tbody>
          <!-- 列表分页 -->
          <el-pagination small layout="prev, pager, next" :total="pageTotal" :page-size="pageSize"
            @current-change="changeSize($event)"></el-pagination>
        </table>
      </div>
    </div>

    <!-- 更新 -->
    <el-dialog @close="clear" style="width: 600px;" v-model="dialogFormVisible" title="信息更新">
      <el-form :model="form1">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="更新姓名" v-model="form1.stuName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="学号禁止修改" disabled v-model="form1.stuId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="更新班级" v-model="form1.classNum" autocomplete="off" />
        </el-form-item>
        <el-form-item label="专业" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="更新专业" v-model="form1.major" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateStu">确定</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加 -->
    <!-- 添加 -->
    <el-dialog style="width: 600px;" v-model="TJ" title="新增学生" center>
      <el-text class="mx-1" style="margin-left: 40%;" size="large">请选择上传方式</el-text>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="SD = true">手动导入</el-button>
          <!-- <el-tab-pane label="书院信息" name="E"></el-tab-pane> -->
          <el-button type="primary"  @click="DR = true, TJ = false">
            Excel导入
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- Excel -->
    <el-dialog style="width: 600px;" v-model="DR" title="新增学生" center>
      <span style="margin-left: 40%;">
        <el-upload class="upload-demo" action="/api/student/excel_in">
          <el-button style="margin-left: 220px;" type="primary">选择文件</el-button>
        </el-upload>
      </span>
    </el-dialog>
    <!-- 手动 -->
    <el-dialog @close="TJ = false" style="width: 600px;" v-model="SD" title="新增学生" center>
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加姓名" v-model="form.stuName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加学号" v-model="form.stuId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加班级" v-model="form.classNum" autocomplete="off" />
        </el-form-item>
        <el-form-item label="专业" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加专业" v-model="form.major" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学院" :label-width="formLabelWidth">
          <el-input style="width: 200px;" placeholder="添加学院" v-model="form.institute" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="save">确定</el-button>
          <el-button type="primary" @click="SD = false; TJ = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import { addstudent, updatestudent, deletestudent } from "@/api/student"
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  data() {
    return {
      TJ: false,
      SD: false,
      DR: false,
      dialogFormVisible: false,
      form: {
        stuName: '',
        stuId: '',
        classNum: '',
        major: '',
        institute: '',
        eduType: '',
      },
      form1: {
        stuName: '',
        stuId: '',
        classNum: '',
        major: '',
        institute: '',
      },
      formLabelWidth: '180px',
      updateInfo: [],
      studentInfo: [],
      isShow: false,
      stu_name: "",
      stu_id: "",
      class_num: "",
      type: "",
      page: {
        pageNum: 1,
        pageSize: 10
      },
      pageTotal: 0
    }
  },
  // created() {
  //   this.select()
  // },

  mounted() {
    this.select()
  },

  methods: {
    deleteStu(stuId) {
      console.log('123');
      ElMessageBox.confirm(
        '是否确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          deletestudent(stuId).then(response => ElMessage({
            type: 'success',
            message: '删除成功',
          }))
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          })
        })
    },
    update(student) {
      this.form1.stuName = student.stuName;
      this.form1.stuId = student.stuId;
      this.form1.classNum = student.classNum;
      this.form1.major = student.major;
    },
    save() {
      addstudent(this.form).then(response => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      });
    },
    updateStu() {
      updatestudent(this.form1).then(response => {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      });
    },
    clear() {
      this.form = {};
    },
    toDetail(Id) {
      this.$router.push("/student-detail/" + Id)
    },
    select() {
      const { pageNum, pageSize } = this.page
      this.isShow = true
      this.$http
        .post(
          `/api/student/search`,
          {
            stuName: this.stu_name,
            stuId: this.stu_id ? Number(this.stu_id) : '',
            classNum: this.class_num,
            pageNum,
            pageSize,
          }
        )
        .then(
          response => {
            const { data: res } = response
            if (res.code == 200) {
              this.studentInfo = res.data.data
              this.pageTotal = res.data.total
            }
          },
          err => {
            return err
          }
        )
    },
    changeSize(val) {
      this.page.pageNum = val
      this.select()
    },
  },
}
</script>

<style lang="scss" scoped>
.select-wrapper {
  background-image: url("../assets/bg.jpg");
  background-size: cover;
  height: 100vh;

  .student-list:hover {
    background-color: #1c689c;
  }

  .nav {
    width: 100%;
    height: 180px;
    display: flex;

    .left {
      width: 70%;

      ul {
        display: flex;
        list-style: none;
        align-items: center;

        li {
          height: 120px;
          width: 30%;
          font-size: 25px;
          line-height: 120px;
          color: #fff;
          text-align: center;
        }

        :nth-child(2) {
          border-left: 1px solid #fff;
        }
      }
    }

    .right {
      width: 30%;
    }
  }

  .select-center {
    width: 100%;
    background-color: #fff;
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    margin-top: 35px;

    .select {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;

      .select-input {
        label {
          margin-left: 5px;
        }

        input {
          width: 140px;
          height: 50px;
          border-radius: 8px;
          font-size: 15px;
          margin-left: 10px;
        }
      }

      .select-btn {
        width: 200px;
        height: 50px;
        display: flex;
        justify-content: flex-end;

        button {
          width: 120px;
          margin-left: 15px;
          border-radius: 5px;
          color: #fff;
          border: none;
          background-color: #1c689c;
          cursor: pointer;
        }
      }
    }

    .table {
      table {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        border-radius: 8px;
        border-collapse: collapse;
        padding: 10px;

        thead {
          background-color: #ecf3fd;
        }
      }

      td,
      th {
        border-top: 1px solid #ddd;
      }
    }
  }
}
</style>
